<template>
  <div>
    <el-table
      v-loading="loading"
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column label="ID" width="140">
        <template slot-scope="scope">{{ scope.row.fmId }}</template>
      </el-table-column>
      <el-table-column label="日期" width="140">
        <template slot-scope="scope">{{ scope.row.fmDate }}</template>
      </el-table-column>
      <el-table-column prop="fmtitle" label="标题" width="160">
      </el-table-column>
      <el-table-column label="内容" width="580" show-overflow-tooltip>
        <template slot-scope="scope">
          <div v-html="scope.row.fmContent"></div
        ></template>
      </el-table-column>
      <el-table-column label="操作" fixed="right">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <div style="margin-top: -70px">
      <el-button @click="toggleSelection(multipleSelection)"
        >删除选中</el-button
      >
    </div>

    <div class="admin-fenye">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="8"
        :currentPage="curPage"
        @current-change="page"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { request } from "../../network/request";
export default {
  name: "CollocationAdmin",
  data() {
    return {
      tableData: "",
      multipleSelection: [],
      loading: true,
      curPage: 1,
      total: 0,
      deleList: "",
    };
  },
  created() {
    this.getMessage();
  },
  methods: {
    getMessage() {
      if (this.$route.query.page != undefined) {
        this.curPage = this.$route.query.page;
      }
      request({
        url: "/foodmatching/queryFoodMatchingBackstage",
        params: {
          pageNum: this.curPage,
        },
      })
        .then((res) => {
          this.tableData = res.data.data.list;
          this.total = res.data.data.total;
          this.loading = false;
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    toggleSelection(multipleSelection) {
      console.log(multipleSelection);
      if (multipleSelection.length == 0) {
        this.$alert("未选择任何值,请勾选", "提示", {
          confirmButtonText: "确定",
        });
      } else {
        request({
          url: "/foodmatching/deleteMoreFoodMatching",
          params: {
            moreFmId: this.deleList,
          },
        })
          .then((res) => {
            console.log(res);
            this.$alert("删除成功", "提示", {
              confirmButtonText: "确定",
              callback: () => {
                if (this.multipleSelection.length == this.tableData.length) {
                  this.$router.push({
                    path: "/admincollocation",
                    query: {
                      pageNum: this.$route.query.pageNum - 1,
                    },
                  });
                  location.reload();
                } else {
                  location.reload();
                }
              },
            });
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.deleList = "";
      for (let i = 0; i < this.multipleSelection.length; i++) {
        this.deleList += this.multipleSelection[i].fmId + ",";
      }
    },
    handleDelete(index, row) {
      request({
        url: "/foodmatching/deleteFoodMatchingById",
        params: {
          fmId: row.fmId,
        },
      })
        .then((res) => {
          console.log(res, index);
          this.$alert("删除成功", "提示", {
            confirmButtonText: "确定",
            callback: () => {
              console.log(this.tableData);
              if (this.tableData.length == 1) {
                this.$router.push({
                  path: "/admincollocation",
                  query: {
                    pageNum: this.$route.query.pageNum - 1,
                  },
                });
                location.reload();
              } else {
                location.reload();
              }
            },
          });
        })
        .catch((err) => {
          console.log(err);
        });
    },
    page(currentPage) {
      this.curPage = currentPage;
      this.loading = true;
      this.$router.push({
        path: "adminfood",
        query: {
          page: currentPage,
        },
      });
      this.getMessage();
    },
  },
};
</script>

<style>
.el-tooltip__popper {
  max-width: 30%;
}
</style>